import React, { useEffect, useState } from "react";
import { NavBar, Input, Button } from "react-vant";
import { useNavigate } from "react-router-dom";


import Add_conter from "./Add_conter";

// 接收以?id=123456形式路由传过来的参数
import { useSearchParams } from "react-router-dom";
import "../style/AddAddress.css";

function Add_address() {
  const navigate = useNavigate();

  const [searchParams] = useSearchParams();
  const adder = searchParams.get("address");

  const [name, setName] = useState(""); // 收货人姓名
  const [phone, setPhone] = useState(""); // 手机号码
  const [address, setAddress] = useState(""); // 详细地址
  const [floor, setFloor] = useState(""); // 楼号门牌
  const [tag, setTag] = useState(""); // 地址标签
  const [identify, setIdentify] = useState(""); // 识别

  useEffect(() => {
    if (adder) {
      setAddress(adder);
    } else {
      setAddress("");
    }
  }, [adder]);

  const [edTag, setEdTag] = useState(["公司", "家", "学校", "父母", "朋友"]); // 编辑标签状态

  return (
    <div
      style={{ height: "100vh", backgroundColor: "#F7F7F7", width: "100vw" }}
    >
      <NavBar
        style={{ backgroundColor: "#f7f7f7" }}
        onClickLeft={() => navigate(-1)}
        title={
          <span style={{ fontSize: "18px", fontWeight: "bold" }}>
            新增收货地址
          </span>
        }
      />

      <Add_conter
        edTag={edTag}
        tag={tag}
        setTag={setTag}
        name={name}
        setName={setName}
        phone={phone}
        setPhone={setPhone}
        address={address}
        setAddress={setAddress}
        floor={floor}
        setFloor={setFloor}
      />

      <div className="btn-container">
        <div
          style={{
            display: "flex",
            justifyContent: "space-around",
            alignItems: "center",
          }}
        >
          <span>智能识别</span>
          <Input.TextArea
            placeholder="粘贴或输入真实地址，点击“识别”自动填充表单。格式：张三,13812345678,北京市 朝阳区 三里屯街道三里屯小区10号楼1单元101室"
            autoSize={{ minHeight: 80, maxHeight: 200 }}
            value={identify}
            style={{
              width: "70%",
              borderRadius: "10px",
              padding: "7px",
              backgroundColor: "#F7F7F7",
            }}
            onChange={(e) => setIdentify(e)}
          />
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            margin: "20px 0",
          }}
        >
          <div></div>
          <div style={{ display: "flex", alignItems: "center" }}>
            <span style={{ color: "orange" }} onClick={() => setIdentify("")}>
              清除
            </span>
            <Button
              plain
              size="mini"
              color="orange"
              style={{ margin: "0 20px" }}
              onClick={() => {
                const arr = identify.split(",");
                setName(arr[0]);
                setPhone(arr[1]);
                setAddress(arr[2]);
                setFloor(arr[3]);
              }}
            >
              识别
            </Button>
          </div>
        </div>
      </div>

      <Button type="primary" round className="add-address-btn">
        保存
      </Button>
    </div>
  );
}
export default Add_address;
